

import { Suspense } from "react";

//  从react-router-dom中引入  Routes Route HashRouter HistoryRouter
import {
    Route,
    Navigate,
    HashRouter,
    BrowserRouter as Router,
    Routes
} from "react-router-dom";

import routerConfig from "./routerConfig";
import { RouterListItem } from "../utils/types";



function renderRouter (routes:RouterListItem[]) {
    return routes.map((item,index) => {
        return <Route
            key={index}
            path={item.path}
            element={item.redirect ? <Navigate to={item.redirect}/> : <item.component/>}
        >
            {
                item.children && renderRouter(item.children)
            }
        </Route>
    })
}








const RouterView = () => {
    const { mode = "history", routes } = routerConfig;
    return (
        <Suspense fallback="正在加载中。。。。。">
            
            {
                mode === "history" ? <Router>
                    <Routes>
                        {
                            renderRouter(routes)
                        }
                    </Routes>

                </Router> : <HashRouter>
                    <Routes>
                        {
                            renderRouter(routes)
                        }
                    </Routes>
                </HashRouter>
            }
        </Suspense>
    )
};


export default RouterView;



